<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        #userInfoDialog {
            padding: 20px;
            width: 400px;
            display: none; /*隐藏层*/
        }

        #userInfoDialog p {
            padding: 10px 0;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">管理员列表</div>
        <div class="layui-card-body">
            <!-- 数据表格元素 -->
            <table id="adminlist" lay-filter="adminFilter"></table>
        </div>
    </div>
</div>
<!--用户信息对话框-->
<div id="userInfoDialog">
    <table class="layui-table">
        <tr>
            <td>用户名</td>
            <td><span id="username"></span></td>
        </tr>
        <tr>
            <td>添加时间</td>
            <td><span id="addtime"></span></td>
        </tr>
        <tr>
            <td>状态</td>
            <td><span id="status"></span></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><span id="password"></span></td>
        </tr>
        <tr>
            <td>盐值</td>
            <td><span id="salt"></span></td>
        </tr>
    </table>
</div>

<script src="../res/layui/layui.js"></script>
<script>
    layui.use(function () {
        //加载获取table模块
        var table = layui.table;
        //加载获取layer弹层模块
        var layer = layui.layer;
        //加载jquery对象
        var $ = layui.jquery;
        var util = layui.util;

        //使用表格组件渲染数据表格
        table.render({
            elem:'#adminlist',                  //绑定表格所在的元素（选择器）
            url:'http://127.0.0.1/admin/list',  //服务端数据接口地址
            page: {
                curr:1,             //初始页码数
                limit:5,             //每页数据条数
                limits:[5,10,15,20] //限定下拉列表的每页数据条数集
            },                         //开启分页工具栏
            cols:[[                             //数据项与表格列对应关系配置
                {type:'checkbox'},
                {title:'序号',type:'numbers'},
                {title:'ID',field:'id'},
                {title:'账号',field:'username'},
                {title:'创建时间',field:'addtime',templet:'<div>{{layui.util.toDateString(d.addtime,"yyyy年MM月dd日 HH时mm分ss秒")}}</div>'},
                {title:'账号状态',field:'status',templet:'<div>{{d.status === 0 ? "正常" : "禁用"}}</div>'},
                {title:'操作',templet:'#rowTools'}  //自定操作列（自定义模板）
            ]]
        })

        //绑定单元格事件
        table.on('tool(adminFilter)',function(obj){
            //获取被点击按钮的lay-event属性值
            let e = obj.event
            switch(e){
                case 'details':
                    //查看详情
                    let index1 = layer.open({
                                    type:1,                                 //弹层类型 ：页面层
                                    content:$('#userInfoDialog'),           //内容：绑定dom节点（jq选择）
                                    shadeClose:true,                        //点击遮罩层关闭对话框
                                    anim: 6,
                                    success:function(layero,index,that){    //弹层成功显示后的回调
                                        //将管理员信息在弹层指定区域显示
                                        layero.find('#username').text(obj.data.username)
                                        layero.find('#addtime').text(layui.util.toDateString(obj.data.addtime,"yyyy年MM月dd日 HH时mm分ss秒")) 
                                        layero.find('#status').html(obj.data.status === 0 ? '<span class="layui-badge layui-bg-blue">正常</span>':'<span class="layui-badge layui-bg-red">禁用</span>')  
                                        layero.find('#password').text(obj.data.password)  
                                        layero.find('#salt').text(obj.data.salt)  
                                    },
                                    closeBtn:2,         //标题栏关闭按钮风格（悬浮）
                                    btn:['关闭'],       //自定义按钮，可以定义多个
                                    btnAlign:'c',       //按钮对齐方式（l-左    c-居中     r-右对齐）
                                    btn1:function(){    //为自定义按钮绑定点击事件，btnX表示按钮索引，从1开始
                                        //关闭指定弹出框
                                        layer.close(index1)
                                    }
                                })
                    break
                case 'del':
                    //删除
                    layer.confirm('确定删除该管理员吗?',{icon:3},function(){
                        //获取需要删除的管理员id
                        let id = obj.data.id
                        //发送ajax请求
                        $.ajax({
                            url:`http://127.0.0.1/admin/${id}`,
                            type:'DELETE',
                            success:function(resp){
                                if(resp.code === 0){
                                    layer.msg(resp.msg)
                                    //执行dom删除，删除页面上的dom节点
                                    obj.del()
                                }else{
                                    layer.alert(resp.msg,{icon:2})
                                }
                            }
                        })
                    })
                    break
                case 'updateStatus':
                    //获取需要被修改的状态以及管理员id
                    let status = $(this).data('status')
                    let id = obj.data.id
                    //修改状态
                    layer.confirm('确认修改吗?',{icon:3},function(){
                          //准备需要提交数据
                          let data = {
                            id:id,
                            status:status
                          }
                          //发送ajax请求  
                          $.ajax({
                            url:'http://127.0.0.1/admin/update',
                            type:'PUT',
                            contentType:'application/json',
                            data:JSON.stringify(data),
                            success:function(resp){
                                if(resp.code === 0){
                                    layer.msg(resp.msg)
                                    //更新表格
                                    table.reloadData('adminlist')
                                }else{
                                    layer.alert(resp.msg,{icon:2})
                                }
                            }
                          })
                    })
                    break
            }
        })

    })
</script>


<!--操作栏自定义模板-->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-list"></i>
            详情
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
        {{# if(d.status === 0){ }}
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="updateStatus" data-status="1">
            <i class="layui-icon layui-icon-close-fill"></i>
            禁用
        </button>
        {{# }else{ }}
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="updateStatus" data-status="0">
            <i class="layui-icon layui-icon-ok-circle"></i>
            启用
        </button>
        {{# } }}
    </div>
</script>


</body>
</html>